<template>
  <div class="exBox">
    <TopBack textContent="这些都是“断货王”快来抢购啊" :cssTextC="{ width: '3.6rem' }" />
    <router-link to="#" class="fxImgBox">
      <img class="fxImg" src="../../../../assets/zfc-img/断货王/分享图标.png" alt="" />
    </router-link>
    <div class="fill"></div>
    <div class="dhwSpItemBox" v-for="(v, k) in DhwSpArr" :key="k + 'sp'">
      <div class="dhwSpItemGgImgBox">
        <img class="dhwSpItemGgImg" :src="v.ggImgUrl" alt="" />
      </div>
      <div class="dhwSpItemInfoBox">
        <router-link
          :to="rv.goPath"
          class="dhwSpItemInfoItem"
          v-for="(rv, rk) in v.DhwSpInfoArr"
          :key="rk + 'spInfo'"
        >
          <div class="dhwSpItemInfoItemImgBox">
            <img class="dhwSpItemInfoItemImg" :src="rv.imgUrl" alt="" />
          </div>
          <div class="dhwSpItemInfoItemTextBox">
            <span class="dhwSpItemInfoItemText dhwSpItemInfoItemText1">{{
              rv.text
            }}</span>
            <span class="dhwSpItemInfoItemText dhwSpItemInfoItemText2">{{ rv.pro }}</span>
            <div class="dhwSpItemInfoItemHr"></div>
            <span class="dhwSpItemInfoItemText dhwSpItemInfoItemText3">{{
              rv.sNum
            }}</span>
            <span class="dhwSpItemInfoItemText dhwSpItemInfoItemText4">{{ rv.go }}</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import TopBack from "../TopNav/TopBack";
export default {
  name: "Dhw",
  data() {
    return {
      DhwSpArr: [
        {
          ggImgUrl: require("../../../../assets/zfc-img/断货王/广告图范例.png"),
          DhwSpInfoArr: [
            {
              imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例1.png"),
              text: "不易脱妆口红",
              pro: "￥59",
              sNum: "还剩1000件",
              go: "马上去抢",
              goPath: "/dhwspinfo",
            },
            {
              imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例2.png"),
              text: "花蕊唇彩",
              pro: "￥129",
              sNum: "还剩1000件",
              go: "马上去抢",
              goPath: "/dhwspinfo",
            },
            {
              imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例3.png"),
              text: "娇吻玉口红",
              pro: "￥88",
              sNum: "还剩1000件",
              go: "马上去抢",
              goPath: "/dhwspinfo",
            },
          ],
        },
        {
          ggImgUrl: require("../../../../assets/zfc-img/断货王/广告图范例.png"),
          DhwSpInfoArr: [
            {
              imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例1.png"),
              text: "不易脱妆口红",
              pro: "￥59",
              sNum: "还剩1000件",
              go: "马上去抢",
              goPath: "/dhwspinfo",
            },
            {
              imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例2.png"),
              text: "花蕊唇彩",
              pro: "￥129",
              sNum: "还剩1000件",
              go: "马上去抢",
              goPath: "/dhwspinfo",
            },
            {
              imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例3.png"),
              text: "娇吻玉口红",
              pro: "￥88",
              sNum: "还剩1000件",
              go: "马上去抢",
              goPath: "/dhwspinfo",
            },
          ],
        },
      ],
    };
  },
  components: {
    TopBack,
  },
};
</script>

<style>
* {
  /* overflow: hidden; */
}
a {
  text-decoration: none;
}
</style>

<style scoped>
* {
  font-size: 0;
}
.exBox {
  background-color: #f2f2f2;
}
.fill {
  height: 0.6rem;
  background-color: #ffffff;
}
.fxImgBox {
  width: 0.37rem;
  height: 0.96rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0.2rem;
  z-index: 1000;
}
.fxImg {
  width: 0.37rem;
  height: 0.35rem;
}
.dhwSpItemBox {
  width: 100%;
  margin-bottom: 0.21rem;
  border-top: 0.01rem solid #aeaeae;
  border-bottom: 0.01rem solid #c2c2c2;
  background-color: #ffffff;
}
.dhwSpItemBox:nth-last-of-type(1) {
  border-bottom: none;
}
.dhwSpItemGgImgBox {
  width: 100%;
}
.dhwSpItemGgImg {
  width: 100%;
}
.dhwSpItemInfoBox {
  width: calc(100% - 0.4rem);
  height: 3.56rem;
  margin: 0 0.2rem;
  display: flex;
}
.dhwSpItemInfoItem {
  height: 100%;
  flex-grow: 1;
}
.dhwSpItemInfoItemImgBox {
  width: 100%;
  height: 2.08rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dhwSpItemInfoItemImg {
  display: block;
}
.dhwSpItemInfoItemTextBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dhwSpItemInfoItemText {
  display: block;
  text-align: center;
}
.dhwSpItemInfoItemText1 {
  height: 0.24rem;
  margin-bottom: 0.15rem;
  line-height: 0.24rem;
  font-size: 0.24rem;
  color: #000000;
}
.dhwSpItemInfoItemText2 {
  height: 0.24rem;
  margin-bottom: 0.03rem;
  line-height: 0.24rem;
  font-size: 0.24rem;
  color: #e83d41;
}
.dhwSpItemInfoItemHr {
  width: 1.8rem;
  margin-bottom: 0.09rem;
  border-top: 0.01rem solid #cccccc;
}
.dhwSpItemInfoItemText3 {
  height: 0.18rem;
  margin-bottom: 0.08rem;
  line-height: 0.18rem;
  font-size: 0.18rem;
  color: #4c4c4c;
}
.dhwSpItemInfoItemText4 {
  width: 1.36rem;
  height: 0.3rem;
  line-height: 0.3rem;
  margin-bottom: 0.16rem;
  font-size: 0.18rem;
  color: #ffffff;
  background-color: #e53e42;
  border-radius: 0.15rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
